關於昨天metaKeySelection，
我昨晚睡前想了想覺得寫得不太好，
畢竟他本身就有按shift 跟 ctrl 的功能設計，
與metaKeySelection並無直接關係，
所以今天有稍微進行調整，反不反人類其實...
也許對比較嚴謹的謹慎勇者來說是一個很好的功能
跟前面幾十位修正前已讀的人先說一聲抱歉
誤導大家了

那麼接下來繼續進行Datatable的部分，
來說說關於expander的部份，
資料Product interface 因為多了order但為了保持與前面公用
修改如下
interface/table.ts

export interface Product {
    id: string;
    code: string;
    name: string;
    description: string;
    image: string;
    price: number;
    category: string;
    quantity: number;
    inventoryStatus: string;
    rating: number;
    orders?: Order[];
}

在來資料取用與前面不一樣

    let service = new ProductService();
    const [tabledata,setTabledata] =useState<Product[]>();
    useEffect(() => {
        service.getProductsWithOrdersSmall().then(data => setTabledata(data));
    }, []);

在來套元件

<DataTable 
    value={tabledata}
    expandedRows={expandedRows} 
    onRowToggle={(e) => setExpandedRows(e.data)}
    rowExpansionTemplate={rowExpansionTemplate}
    dataKey="id" >
    <Column expander={allowExpansion}/>
    <Column field="code" header="產品編號"></Column>
    <Column field="name" header="產品名稱"></Column>
    <Column field="category" header="產品類別"></Column>
    <Column field="quantity" header="數量"></Column>
</DataTable>

用rowExpansionTemplate 設定子項目樣式，
data可以獲取當下row的資料
樣式不一定要Table只是剛好範例舉例

const rowExpansionTemplate = (data: Product) => (
    <div className="p-3">
        <h5>Orders for {data.name}</h5>
        <DataTable value={data.orders}>
            <Column field="id" header="Id"></Column>
            <Column field="customer" header="Customer"></Column>
            <Column field="date" header="Date"></Column>
            <Column field="amount" header="Amount" ></Column>
            <Column field="status" header="Status" ></Column>
            <Column ></Column>
        </DataTable>
    </div>
);

設定 Column expander 決定要不要顯示展開箭頭
(布林值，可以直接暴力打true，但就算沒order他還是會顯示)

const allowExpansion = (rowData: Product) => {
    return rowData.orders!.length > 0;
};

全code

import React, { useEffect, useState } from 'react';
import { DataTable, DataTableExpandedRows, DataTableValueArray } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from '../service/table';
import { Product } from '../interfaces/table';
const rowExpansionTemplate = (data: Product) => (
    <div className="p-3">
        <h5>Orders for {data.name}</h5>
        <DataTable value={data.orders}>
            <Column field="id" header="Id"></Column>
            <Column field="customer" header="Customer"></Column>
            <Column field="date" header="Date"></Column>
            <Column field="amount" header="Amount" ></Column>
            <Column field="status" header="Status" ></Column>
            <Column ></Column>
        </DataTable>
    </div>
);
const allowExpansion = (rowData: Product) => {
    return rowData.orders!.length > 0;
};
const Tables5Compnent: React.FC = () => {
    let service = new ProductService();
    const [tabledata, setTabledata] = useState<Product[]>();
    const [expandedRows, setExpandedRows] = useState<DataTableExpandedRows | DataTableValueArray | undefined>(undefined);

    useEffect(() => {
        service.getProductsWithOrdersSmall().then(data => setTabledata(data));
    }, []);

    return (
        <div>
            <DataTable
                value={tabledata}
                expandedRows={expandedRows}
                onRowToggle={(e) => setExpandedRows(e.data)}
                rowExpansionTemplate={rowExpansionTemplate}
                dataKey="id" >
                <Column expander={allowExpansion} />
                <Column field="code" header="產品編號"></Column>
                <Column field="name" header="產品名稱"></Column>
                <Column field="category" header="產品類別"></Column>
                <Column field="quantity" header="數量"></Column>
            </DataTable>
        </div>

    );
}
export default Tables5Compnent;

好了今天就到這，時間是壓縮再壓縮
最近怨念極度深，連旁邊小夥伴都能感受到我的低氣壓，
希望能撐過30天啊...